<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="nav-title">消息中心</text>
				<view class="nav-right">
					<text class="clear-btn" @click="clearAllMessages">清空</text>
				</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<scroll-view 
			class="message-list" 
			scroll-y="true"
			@scrolltolower="loadMoreMessages"
			refresher-enabled="true"
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
		>
			<view class="message-container">
				<view 
					class="message-item" 
					v-for="message in messages" 
					:key="message.id"
					@click="onMessageClick(message)"
				>
					<view class="message-content">
						<view class="message-header">
							<text class="message-title">{{ message.title }}</text>
							<text class="message-time">{{ message.time }}</text>
						</view>
						<view class="message-body">
							<text class="message-text">{{ message.content }}</text>
						</view>
					</view>
					<view class="message-divider" v-if="!message.isLast"></view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text class="load-more-text">加载更多...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view class="no-more" v-if="!hasMore && messages.length > 0">
				<text class="no-more-text">没有更多消息了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="messages.length === 0 && !loading">
				<image src="/static/logo.png" class="empty-icon"></image>
				<text class="empty-text">暂无消息</text>
				<text class="empty-desc">您还没有收到任何消息</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				refreshing: false,
				hasMore: true,
				page: 1,
				pageSize: 10,
				messages: [
					{
						id: 1,
						title: '支付成功通知',
						content: '您已成功支付56.9元',
						time: '2023.3.11 11:09',
						type: 'payment',
						isRead: false,
						isLast: false
					},
					{
						id: 2,
						title: '支付成功通知',
						content: '您已成功支付56.9元',
						time: '2023.3.11 11:09',
						type: 'payment',
						isRead: false,
						isLast: false
					},
					{
						id: 3,
						title: '支付成功通知',
						content: '您已成功支付56.9元',
						time: '2023.3.11 11:09',
						type: 'payment',
						isRead: false,
						isLast: true
					}
				]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击消息
			onMessageClick(message) {
				console.log('点击消息:', message);
				// 标记为已读
				message.isRead = true;
				// 这里可以跳转到消息详情页面
				uni.showToast({
					title: '查看消息详情',
					icon: 'none'
				});
			},
			// 清空所有消息
			clearAllMessages() {
				uni.showModal({
					title: '确认清空',
					content: '确定要清空所有消息吗？',
					success: (res) => {
						if (res.confirm) {
							this.messages = [];
							uni.showToast({
								title: '已清空',
								icon: 'success'
							});
						}
					}
				});
			},
			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				// 模拟刷新数据
				setTimeout(() => {
					this.page = 1;
					this.hasMore = true;
					this.loadMessages();
					this.refreshing = false;
				}, 1500);
			},
			// 加载更多消息
			loadMoreMessages() {
				if (!this.hasMore || this.loading) return;
				this.page++;
				this.loadMessages();
			},
			// 加载消息数据
			loadMessages() {
				this.loading = true;
				// 模拟从后端获取数据
				setTimeout(() => {
					// 这里应该调用后端接口
					// const newMessages = await this.fetchMessagesFromAPI();
					
					// 模拟数据
					const newMessages = this.generateMockMessages();
					
					if (this.page === 1) {
						this.messages = newMessages;
					} else {
						this.messages = [...this.messages, ...newMessages];
					}
					
					// 更新isLast状态
					this.updateLastStatus();
					
					// 判断是否还有更多数据
					this.hasMore = newMessages.length === this.pageSize;
					
					this.loading = false;
				}, 1000);
			},
			// 生成模拟消息数据
			generateMockMessages() {
				const messageTypes = [
					{ title: '支付成功通知', content: '您已成功支付56.9元', type: 'payment' },
					{ title: '订单状态更新', content: '您的维修订单已完成', type: 'order' },
					{ title: '系统通知', content: '系统将于今晚进行维护升级', type: 'system' },
					{ title: '优惠活动', content: '新用户专享优惠券已到账', type: 'promotion' }
				];
				
				const messages = [];
				for (let i = 0; i < this.pageSize; i++) {
					const randomType = messageTypes[Math.floor(Math.random() * messageTypes.length)];
					const randomTime = this.generateRandomTime();
					
					messages.push({
						id: Date.now() + i,
						title: randomType.title,
						content: randomType.content,
						time: randomTime,
						type: randomType.type,
						isRead: Math.random() > 0.5,
						isLast: false
					});
				}
				
				return messages;
			},
			// 生成随机时间
			generateRandomTime() {
				const now = new Date();
				const randomDays = Math.floor(Math.random() * 30);
				const randomHours = Math.floor(Math.random() * 24);
				const randomMinutes = Math.floor(Math.random() * 60);
				
				const date = new Date(now.getTime() - randomDays * 24 * 60 * 60 * 1000);
				date.setHours(randomHours, randomMinutes, 0, 0);
				
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				
				return `${year}.${month}.${day} ${hours}:${minutes}`;
			},
			// 更新最后一项状态
			updateLastStatus() {
				if (this.messages.length > 0) {
					this.messages.forEach((message, index) => {
						message.isLast = index === this.messages.length - 1;
					});
				}
			}
		},
		onLoad() {
			// 页面加载时获取消息数据
			this.loadMessages();
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
		height: 88rpx;
	}

	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 48rpx;
		color: white;
		font-weight: bold;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}

	.nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-btn {
		font-size: 28rpx;
		color: white;
	}

	/* 消息列表 */
	.message-list {
		height: calc(100vh - var(--status-bar-height) - 88rpx);
		background-color: #f5f7fa;
	}

	.message-container {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.message-item {
		position: relative;
	}

	.message-content {
		padding: 30rpx;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15rpx;
	}

	.message-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		flex: 1;
		margin-right: 20rpx;
	}

	.message-time {
		font-size: 24rpx;
		color: #999;
		white-space: nowrap;
	}

	.message-body {
		margin-top: 10rpx;
	}

	.message-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}

	.message-divider {
		height: 1rpx;
		background-color: #f0f0f0;
		margin: 0 30rpx;
	}

	/* 加载更多 */
	.load-more {
		padding: 30rpx;
		text-align: center;
	}

	.load-more-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 没有更多数据 */
	.no-more {
		padding: 30rpx;
		text-align: center;
	}

	.no-more-text {
		font-size: 24rpx;
		color: #ccc;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;
		height: 400rpx;
	}

	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
		opacity: 0.3;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #ccc;
	}
</style>
